<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <!-- cdn引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--cdn引入ElementUI组件必须先引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- cdn引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-header, .el-footer {
        background-color: #409EFF;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>

<body>
<div id="app">


    <el-container>
        <el-header>订单列表</el-header>


        <el-main>
            <div align="center">
                <el-button type="primary" @click="loadTable">刷新列表</el-button>
                <template align="center">
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="productName"
                                label="产品名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="createDate"
                                label="订单创建时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="expireDate"
                                label="订单过期时间"
                                width="180">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </el-main>
    </el-container>


</div>

<!--cdn引入ElementUI组件必须先引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- cdn引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript">
    function isEmptyObject(obj) {
        return obj === null || obj === undefined || obj === '';
    }


    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
            tableData: [{
                productName: '',
                createDate: '',
                expireDate: ''
            }]
        },
        methods: {
            loadTable() {
                console.log('-----------------刷新订单列表---------------------');
                let vm = this;
                $.ajax({
                    url: '/orderList',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log('-----------------过期订单列表---------------------');
                        console.log(data);
                        vm.tableData = data;
                    },
                });
            }
        },
        created: function () {
            console.log('-----------------初始化 orderList.html---------------------');
            this.loadTable();
        },
    });


</script>


</body>

</html>
